<template>
	<view class="updatePwd">
		<view>
			<van-dialog id="van-dialog"></van-dialog>
			<view class="newPwd">
				<view class="text">
					请输入新密码
				</view>
				<view class="one">
					<input v-if="reveal" type="password" v-model="newPwd" placeholder="请输入新密码" />
					<input v-else type="text" v-model="newPwd" placeholder="请输入新密码" />
				</view>
				<view class="icon" @click="showNewPwd">
					<image v-if="reveal" class="eye-image" src="../../../static/不显示.png"></image>
					<image v-else class="eyes-image" src="../../../static/眼睛.png"></image>
				</view>
			</view>
			<view class="newPwd">
				<view class="text">
					请确认新密码
				</view>
				<view class="one">
					<input v-if="enterReveal" type="password" v-model="enterPwd" placeholder="请确认新密码" />
					<input v-else type="text" v-model="enterPwd" placeholder="请确认新密码" />
				</view>
				<view class="icon" @click="showPwd">
					<image v-if="enterReveal" class="eye-image-two" src="../../../static/不显示.png"></image>
					<image v-else class="eyes-image-two" src="../../../static/眼睛.png"></image>
				</view>
			</view>
		</view>
		<view @click="submit" class="save">
			保存密码
		</view>
	</view>
</template>

<script>
	import Dialog from '../../../wxcomponents/vant-weapp/dialog/dialog'
	export default {
		data() {
			return {
				newPwd: undefined,
				enterPwd: undefined,
				reveal: true,
				enterReveal: true,
			}
		},
		methods:{
			showNewPwd() {
				this.reveal = this.reveal ? false : true
			},
			showPwd() {
				this.enterReveal = this.enterReveal ? false : true
			},
			submit(){
				if(!this.newPwd || !this.enterPwd || this.newPwd.length <6 || this.newPwd.length>20 || this.enterPwd.length <6 || this.enterPwd.length>20 ){
					Dialog({
						title: "系统提示",
						message: "密码长度为6-20的子符",
					})
				}else if(this.newPwd != this.enterPwd){
					Dialog({
						title: "系统提示",
						message: "两次密码输入不一致",
					})
				} 
			}
		}
	}
</script>

<style lang="scss" scoped>
	.updatePwd{
		background: #d4d4d4;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		.newPwd{
			background: #FFFFFF;
			display: flex;
			padding: 10rpx 20rpx;
			border-bottom: solid 1px #cccccc;
			width: 100vw;
			.text{
				font-size: 32rpx;
				width: 30vw;
				text-align: center;
			}
			input{
				width: 50vw;
				direction: rtl;
			}
			.eye-image {
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				top: 10rpx;
				right: 20rpx;
			}
			
			.eyes-image {
				width: 30rpx;
				height: 40rpx;
				position: absolute;
				top: 10rpx;
				right: 20rpx;
			}
			.eye-image-two {
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				top: 82rpx;
				right: 20rpx;
			}
			
			.eyes-image-two {
				width: 30rpx;
				height: 40rpx;
				position: absolute;
				top: 82rpx;
				right: 20rpx;
			}
		}
		.save{
			margin-top: 20rpx;
			background: #007AFF;
			color: #FFFFFF;
			font-size: 32rpx;
			padding: 20rpx 120rpx;
			width: 90vw;
			text-align: center;
			border-radius: 20rpx;
		}
	}
</style>
